<template>
  <div class="container with-nav-padding">
    <div class="bd-img">
      <img :src="inviteImg" alt="" />
    </div>
    <div v-if="arrowMask" @click.stop="arrowMask = false" class="arrow-mask">
      <img src="@/assets/商品分享-引导-assets/0.png" alt="" />
    </div>
    <div
      class="immInviteBtn"
      :class="{ 'fullscreen-bottom-style': isFullscreen }"
    >
      <button
        class="copyInviteCode"
        @touchmove.stop
        @click="$router.push('/vip-apply/page')"
      >
        立即申请
      </button>
    </div>
  </div>
</template>

<script>
import itemSmallImg from "@/components/item-small-img.vue";
import loadMore from "@/components/load-more";
import { getVipDetail, getVipGood } from "@/api/vip";
import { mapState } from "vuex";
import { getWXSDK } from "@/api/wx";
import wx from "weixin-js-sdk";
export default {
  data() {
    return {
      inviteImg: "",
      inviteCode: "",
      arrowMask: false,
      vip_share_info: "",
      vip_share_title: ""
    };
  },
  computed: {
    ...mapState({
      entryUrl: state => state.app.entryUrl,
      logo: state => state.app.logo,
      isFullscreen: state => state.app.isFullscreen
    })
  },
  methods: {
    inviteUrl() {
      return window.location.href + "?invite_code=" + this.inviteCode;
    }
  },
  components: {
    loadMore,
    itemSmallImg
  },
  created() {
    getVipDetail({ type: 1 }).then(res => {
      if (res.status === 200) {
        this.inviteImg = res.data.data.image;
        this.inviteCode = res.data.data.invite_code;
        this.vip_share_title = res.data.data.vip_share_title;
        this.vip_share_info = res.data.data.vip_share_info;
        let signLink = /(Android)/i.test(navigator.userAgent)
          ? location.href.split("#")[0]
          : this.entryUrl;
      }
    });
  }
};
</script>

<style lang="less" scoped>
.container {
  padding-bottom: 3rem;

  .clear {
    clear: both;
  }

  .immInviteBtn {
    width: 100;
    line-height: 2rem;
    text-align: center;
    left: 0;
    position: fixed;
    bottom: 0rem;
    width: 100%;
    background: #fff;
    border-top: 1px solid #dfdfdf;
    padding: 0 3.2%;
    button {
      font-size: 0.64rem;
      color: #ffffff;
      background: #3393ff;
      border-radius: 0.24rem;
      width: 100%;
      border: none;
      height: 1.44rem;
      margin: 0.28rem 0;
    }
  }
  .arrow-mask {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    text-align: right;
    z-index: 99999;
    img {
      margin-right: 9%;
    }
  }
}
</style>
